<template>
  <div class="account-settings-info-view">
    <a-tabs v-model="tabIndex">
      <a-tab-pane key="1" tab="中文"></a-tab-pane>
      <a-tab-pane key="2" tab="英文"></a-tab-pane>
    </a-tabs>
    <a-row :gutter="16" type="flex">
      <a-col :order="isMobile ? 2 : 1" :md="24" :lg="24">
        <a-form layout="vertical" :form="form">
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-item label="公司名称" v-if="tabIndex==1">
                <a-input placeholder="公司名称" v-model="form.companyName" style="width: 100%" />
              </a-form-item>
              <a-form-item label="英文公司名称" v-else>
                <a-input placeholder="英文公司名称" v-model="form.companyNameEn" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="公司地址" v-if="tabIndex==1">
                <a-input placeholder="公司地址" v-model="form.address" style="width: 100%" />
              </a-form-item>
              <a-form-item label="公司地址英文" v-else>
                <a-input placeholder="公司地址英文" v-model="form.addressEn" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="技术服务热线" v-if="tabIndex==1">
                <a-input placeholder="技术服务热线" v-model="form.techHotPhone" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售咨询热线" v-if="tabIndex==1">
                <a-input placeholder="销售咨询热线" v-model="form.saleHotPhone" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="邮编" v-if="tabIndex==1">
                <a-input placeholder="邮编" v-model="form.postCode" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售手机" v-if="tabIndex==1">
                <a-input placeholder="销售手机" v-model="form.salePhone" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售座机" v-if="tabIndex==1">
                <a-input placeholder="销售座机" v-model="form.saleTelePhone" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售传真" v-if="tabIndex==1">
                <a-input placeholder="销售传真" v-model="form.saleFax" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售邮箱" v-if="tabIndex==1">
                <a-input placeholder="销售邮箱" v-model="form.saleEmail" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售微信" v-if="tabIndex==1">
                <a-input placeholder="销售微信" v-model="form.saleWeChat" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="网站" v-if="tabIndex==1">
                <a-input placeholder="网站" v-model="form.saleWebSite" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="售后服务热线" v-if="tabIndex==1">
                <a-input placeholder="售后服务热线" v-model="form.afterSaleHotNumber" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="售后手机" v-if="tabIndex==1">
                <a-input placeholder="售后手机" v-model="form.afterSalePhone" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="售后座机" v-if="tabIndex==1">
                <a-input placeholder="售后座机" v-model="form.afterSaleTelePhone" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="售后传真" v-if="tabIndex==1">
                <a-input placeholder="售后传真" v-model="form.afterSaleFax" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售邮箱" v-if="tabIndex==1">
                <a-input placeholder="销售邮箱" v-model="form.afterSaleEmail" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="网站seo关键字" v-if="tabIndex==1">
                <a-input placeholder="网站seo关键字" v-model="form.seoKeyWords" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="备案号" v-if="tabIndex==1">
                <a-input placeholder="备案号" v-model="form.recordNumber" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="网站seo描述" v-if="tabIndex==1">
            <a-textarea
              v-model="form.seoDescription"
              placeholder="网站seo描述"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-item>
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-item label="公司Logo" v-if="tabIndex==1">
                <a-upload
                  list-type="picture-card"
                  :file-list="fileList"
                  :remove="hanldeImgRemove"
                  @preview="handlePreview"
                  :customRequest="handleUploadChange"
                  class="upload-half"
                  accept="image/*"
                >
                  <div class="custom-btn" v-if="fileList.length < 1">
                    <a-icon type="ant-cloud" style="font-size: 26px" />
                    <div class="ant-upload-text">添加图片</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售微信二维码" v-if="tabIndex==1">
                <a-upload
                  list-type="picture-card"
                  :file-list="fileList2"
                  :remove="hanldeImgRemove2"
                  @preview="handlePreview"
                  :customRequest="handleUploadChange2"
                  class="upload-half"
                  accept="image/*"
                >
                  <div class="custom-btn" v-if="fileList2.length < 1">
                    <a-icon type="ant-cloud" style="font-size: 26px" />
                    <div class="ant-upload-text">添加图片</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="售后微信二维码" v-if="tabIndex==1">
                <a-upload
                  list-type="picture-card"
                  :file-list="fileList3"
                  :remove="hanldeImgRemove3"
                  @preview="handlePreview"
                  :customRequest="handleUploadChange3"
                  class="upload-half"
                  accept="image/*"
                >
                  <div class="custom-btn" v-if="fileList3.length < 1">
                    <a-icon type="ant-cloud" style="font-size: 26px" />
                    <div class="ant-upload-text">添加图片</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="公众号二维码" v-if="tabIndex==1">
                <a-upload
                  list-type="picture-card"
                  :file-list="fileList1"
                  :remove="hanldeImgRemove1"
                  @preview="handlePreview"
                  :customRequest="handleUploadChange1"
                  class="upload-half"
                  accept="image/*"
                >
                  <div class="custom-btn" v-if="fileList1.length < 1">
                    <a-icon type="ant-cloud" style="font-size: 26px" />
                    <div class="ant-upload-text">添加图片</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="公司介绍" v-if="tabIndex==1">
            <wangEditor id="edtor1" v-model="form.companyIntroduction" :key="tabIndex" @change="editorChange"></wangEditor>
          </a-form-item>
          <a-form-item label="英文公司介绍" v-else>
            <wangEditor id="edtor2" v-model="form.companyIntroductionEn" :key="tabIndex" @change="editorChange1"></wangEditor>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="hanldeUpdateClick">更新基本设置</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <avatar-modal ref="modal" @ok="setavatar" :parent="this" />
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false" width="60%">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import AvatarModal from './AvatarModal'
import { baseMixin } from '@/store/app-mixin'
import { showMessage } from '@/utils/mixins'
import { getSystemInfo, updateSystemInfo } from '@/api/manage'
import { uploadFile, deleteFile } from '@/api/common'
import { getFileName } from '@/utils/util'
import wangEditor from '@/components/Editor/WangEditor.vue'

export default {
  mixins: [baseMixin, showMessage],
  components: {
    AvatarModal,
    wangEditor,
  },
  data() {
    return {
      preview: {},
      tabIndex: '1',
      form: {},
      option: {
        img: '',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1],
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      previewVisible: false,
      previewImage: '',
      originUrl: process.env.VUE_APP_API_ORIGIN,
      avatarId: undefined,
    }
  },
  methods: {
    //删除图片
    hanldeImgRemove3(file) {
      const _this = this
      deleteFile({ id: file.id }).then((res) => {
        if (res.code == 0) {
          this.showMessage(res, () => {
            this.fileList3 = []
            _this.form.afterSaleWechartImg = undefined
          })
        }
      })
    },
    //删除图片
    hanldeImgRemove2(file) {
      const _this = this
      deleteFile({ id: file.id }).then((res) => {
        if (res.code == 0) {
          this.showMessage(res, () => {
            this.fileList2 = []
            _this.form.saleWechartImg = undefined
          })
        }
      })
    },
    // 移动端LOGO
    handleUploadChange2(file) {
      file = file.file
      const _this = this
      const formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata).then((res) => {
        if (res.code == 0) {
          file.url = this.originUrl+res.data.url
          file.uid = res.data._id
          file.id = res.data._id
          file.filename = getFileName(res.data.url)
          _this.fileList2.push(file)
          _this.form.saleWechartImg = res.data._id
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    // 合作伙伴
    handleUploadChange3(file) {
      file = file.file
      const _this = this
      const formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata).then((res) => {
        if (res.code == 0) {
          file.url = this.originUrl+res.data.url
          file.uid = res.data._id
          file.id = res.data._id
          file.filename = getFileName(res.data.url)
          _this.fileList3.push(file)
          _this.form.afterSaleWechartImg = res.data._id
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    //删除图片
    hanldeImgRemove1(file) {
      const _this = this
      deleteFile({ id: file.id }).then((res) => {
        if (res.code == 0) {
          this.showMessage(res, () => {
            this.fileList1 = []
            _this.form.companyAccountsImg = undefined
          })
        }
      })
    },
    // 公众号二维码
    handleUploadChange1(file) {
      file = file.file
      const _this = this
      const formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata).then((res) => {
        if (res.code == 0) {
          file.url = this.originUrl+res.data.url
          file.uid = res.data._id
          file.id = res.data._id
          file.filename = getFileName(res.data.url)
          _this.fileList1.push(file)
          _this.form.companyAccountsImg = res.data._id
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    //自定义上传图片
    handleUploadChange(file) {
      file = file.file
      const _this = this
      const formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata).then((res) => {
        if (res.code == 0) {
          file.url = this.originUrl+res.data.url
          file.uid = res.data._id
          file.id = res.data._id
          file.filename = getFileName(res.data.url)
          _this.fileList.push(file)
          _this.form.companyLogo = res.data._id
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    // 预览图片
    handlePreview(file) {
      this.previewVisible = true
      this.previewImage = file.url
    },
    //删除图片
    hanldeImgRemove(file) {
      const _this = this
      deleteFile({ id: file.id }).then((res) => {
        if (res.code == 0) {
          this.showMessage(res, () => {
            this.fileList = []
            _this.form.companyLogo = undefined
          })
        }
      })
    },
    editorChange(val) {
      this.form.companyIntroduction = val
    },
    editorChange1(val) {
      this.form.companyIntroductionEn = val
    },
    setavatar(data) {
      this.form.avatar = data._id
      this.option.img = data.url
      this.hanldeUpdateClick()
    },
    // 获取公司介绍
    getSystemInfo() {
      getSystemInfo().then((res) => {
        if (res.code == 0) {
          res = res.data[0]
          if (res) {
            this.form = JSON.parse(JSON.stringify(res))
            if (res.companyLogo) {
              this.form.companyLogo = res.companyLogo._id
              this.fileList = [{ 
                uid: res.companyLogo._id,
                id: res.companyLogo._id,
                name: getFileName(res.companyLogo.url),
                url: this.originUrl+res.companyLogo.url,
              }]
            }
            if (res.companyAccountsImg) {
              this.form.companyAccountsImg = res.companyAccountsImg._id
              this.fileList1 = [{ uid: res.companyAccountsImg._id, id: res.companyAccountsImg._id,name: getFileName(res.companyAccountsImg.url), url:this.originUrl+ res.companyAccountsImg.url }]
            }
            if (res.saleWechartImg) {
              this.form.saleWechartImg = res.saleWechartImg._id
              this.fileList2 = [{ uid: res.saleWechartImg._id, id: res.saleWechartImg._id,name: getFileName(res.saleWechartImg.url), url: this.originUrl+ res.saleWechartImg.url }]
            }
            if( res.afterSaleWechartImg ) {
              this.form.afterSaleWechartImg = res.afterSaleWechartImg._id
              this.fileList3 = [{ uid: res.afterSaleWechartImg._id, id: res.afterSaleWechartImg._id,name: getFileName(res.afterSaleWechartImg.url), url: this.originUrl+ res.afterSaleWechartImg.url }]
            }
            if(r.fixedImage) {
              this.form.fixedImage = res.fixedImage._id
              this.fileList4 = [{ uid: res.fixedImage._id, id: res.fixedImage._id,name: getFileName(res.fixedImage.url), url: this.originUrl+ res.fixedImage.url }]
            }
          }
        }
      })
    },
    // 更新公司介绍
    hanldeUpdateClick() {
      this.loading = true
      updateSystemInfo(this.form).then((res) => {
        this.loading = false
        if (res.code == 0) {
          this.showMessage(res, this.getSystemInfo)
        }
      })
    },
  },
  mounted() {
    this.getSystemInfo()
  },
}
</script>

<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 10px;
}
.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  width: 140px;
  box-shadow: 0 0 4px #ccc;
  border-radius: 50%;
  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }
  img,
  .mask {
    width: 140px !important;
    height: 140px !important;
    overflow: hidden;
    border-radius: 50%;
  }
}
</style>
